$(function () {
    load();
});
let table = null;
let myUrl=$('#type').val() == '拼团' ?
    "/jzweb/jazGroupActivity/selGroupActivityList" :
    $('#type').val() == '课程'?
    '/jzweb/jazCoursesOrder/selCourseOrderList':
     $('#type').val() == '订单'?
     '/jzweb/jazGroupOrder/selGroupOrderList':''
let myWhere = {}
const setMyWhere=()=>{
    myWhere = $('#type').val() == '拼团' ?
        {
            name: $("#name").val().trim(),
            mobile: $("#mobile").val().trim(),
            createTime: $("#createTime").val(),
            endTime: $("#endTime").val(),
        } :
        $('#type').val() == '课程'?
            {
                name: $("#name").val().trim(),
                mobile: $("#mobile").val().trim(),
                createTime: $("#createTime").val(),
                endTime: $("#endTime").val(),
                status: $('#myRadio').val()
            } :
            $('#type').val() == '订单'?
                {
                    name: $("#name").val().trim(),
                    mobile: $("#mobile").val().trim(),
                    createTime: $("#createTime").val(),
                    endTime: $("#endTime").val(),
                    status:$('#myRadio').val()
                }:{}
}
setMyWhere()
let myCols = $('#type').val() == '拼团' ?
    [[

        {
            field: 'groupProdName',
            title: '商品名称',
            align: 'center',
            templet:function (d){
                return `<span>${d.groupProdName}</span>`
            }
        },
        {
            field: 'peopleNum',
            title: '拼团人数',
            align: 'center',
            templet:function (d){
                return `<span>${d.peopleNum}</span>`
            }
        },
        {
            field: 'sponsorUserName',
            align: 'center',
            title: '发起人',
            templet:function (d){
                return `<span>${d.sponsorUserName}</span>`
            }
        },
        {
            field: 'sponsorUserPhone',
            align: 'center',
            title: '手机号',
            templet:function (d){
                return `<span>${d.sponsorUserPhone}</span>`
            }
        },
        {
            field: 'createTime',
            align: 'center',
            title: '拼团时间',
            templet:function (d){
                return `<span>${d.createTime}</span>`
            }
        },
        {
            title: '操作',
            field: 'id',
            align: 'center',
            templet: function (d) {
                var e = `<a  class="btn btn-primary btn-sm ${s_jazGroupActivity_info}" href="#" mce_href="#" title="详情" onclick="lookInfo('${d.id}',-1)"><i class="fa fa-send"></i></a> `;
                return e;
            }
        }
    ]] :
    $('#type').val() == '课程'?
    [[
        {
            field: 'coursesNo',
            title: '订单编号',
            align: 'center',
        templet:function (d){
            return `<span>${d.coursesNo}</span>`
        }
        },
        {
            field: 'coursesName',
            title: '课程名称',
            align: 'center',
            templet:function (d){
                return `<span>${d.coursesName}</span>`
            }
        },
        {
            field: 'userName',
            align: 'center',
            title: '姓名',
            templet:function (d){
                return `<span>${d.userName}</span>`
            }
        },
        {
            field: 'phone',
            align: 'center',
            title: '手机号',
            templet:function (d){
                return `<span>${d.phone}</span>`
            }
        },
        {
            field: 'createrDate',
            align: 'center',
            title: '下单时间',
            templet:function (d){
                return `<span>${d.createrDate}</span>`
            }
        },
        {
            field: 'status',
            align: 'center',
            title: '状态',
            templet:(d)=>{
                return d.status=='未支付'?'<span class="label label-primary">待付款</span>':
                    d.status=='支付成功'?'<span class="label label-success">已发货</span>':
                        d.status=='用户已取消'?'<span class="label label-warning">已取消</span>':'-'
            }
        },
        {
            title: '操作',
            field: 'id',
            align: 'center',
            templet: function (d) {
                var e = `<a  class="btn btn-primary btn-sm ${s_jazCoursesOrder_info}" href="#" mce_href="#" title="详情" onclick="lookInfo('${d.id}',-1)"><i class="fa fa-send"></i></a> `;
                return e;
            }
        }
    ]] :
    $('#type').val() == '订单'?
      [[
            {
                field: 'orderNo',
                title: '订单号',
                align: 'center',
                templet:function (d){
                    return `<span>${d.orderNo}</span>`
                }
            },
            {
                field: 'groupProdName',
                title: '商品名称',
                align: 'center',
                templet:function (d){
                    return `<span>${d.groupProdName}</span>`
                }
            },
            {
                field: 'userName',
                align: 'center',
                title: '姓名',
                templet:function (d){
                    return `<span>${d.userName}</span>`
                }
            },
            {
                field: 'phone',
                align: 'center',
                title: '手机号',
                templet:function (d){
                    return `<span>${d.phone}</span>`
                }
            },
            {
                field: 'createTime',
                align: 'center',
                title: '下单时间',
                templet:function (d){
                    return `<span>${d.createTime}</span>`
                }
            },
            {
                field: 'orderStatus',
                align: 'center',
                title: '状态',
                templet:function (d){
                    if(d.orderStatus=='1'){
                        return '<span class="label label-primary">待使用</span>'
                    } if(d.orderStatus=='2'){
                        return '<span class="label label-success">已使用</span>'
                    } if(d.orderStatus=='3'){
                        return '<span class="label label-warning">已退款</span>'
                    } if(d.orderStatus=='4'){
                        return '<span class="label label-warning">已过期</span>'
                    }
                    return '-'

                }
            },
            {
                title: '操作',
                field: 'id',
                align: 'center',
                templet: function (d) {
                    var e = `<a  class="btn btn-primary btn-sm ${s_jazUserOrder_info}" href="#" mce_href="#" title="详情" onclick="lookInfo('${d.id}',-1)"><i class="fa fa-send"></i></a> `;
                    return e;
                }
            }
        ]]:
    [[]]
/**
 * 重置
 */
const dataReset = () => {
    $("#name").val('')
    $("#mobile").val('')
    $("#createTime").val('')
    $("#endTime").val('')
    setMyWhere()
    table.reload('exampleTable', {
        page: {
            curr: 1 //重新从第 1 页开始
        }
        , where: myWhere
    });
}
let pages = 1;

function load() {
    layui.use(['table', 'laydate', 'form'], function () {
        table = layui.table
        var laydate = layui.laydate, $ = layui.$, form = layui.form;
        ;
        laydate.render({
            elem: '#ID-laydate-range',
            range: ['#createTime', '#endTime'],
            rangeLinked: true,
            type: 'datetime',
            shortcuts: [
                {
                    text: "上个月",
                    value: function () {
                        var date = new Date();
                        var year = date.getFullYear();
                        var month = date.getMonth();
                        return [
                            new Date(year, month - 1, 1),
                            new Date(year, month, 0)
                        ];
                    }
                }, {
                    text: "这个月",
                    value: function () {
                        var date = new Date();
                        var year = date.getFullYear();
                        var month = date.getMonth();
                        return [
                            new Date(year, month, 1),
                            new Date(year, month + 1, 0)
                        ];
                    }
                },
                {
                    text: "下个月",
                    value: function () {
                        var date = new Date();
                        var year = date.getFullYear();
                        var month = date.getMonth();
                        return [
                            new Date(year, month + 1, 1),
                            new Date(year, month + 2, 0)
                        ];
                    }
                }
            ],
            done: function(value, date, endDate){
                let mydataList=value.split(' - ')
                $('#createTime').val(mydataList[0])
                $('#endTime').val(mydataList[1])
                setMyWhere()
            }
        });
        // 创建渲染实例
        table.render({
            elem: '#exampleTable'
            , id: 'exampleTable'
            , url: myUrl// 此处为静态模拟数据，实际使用时需换成真实接口
            , cellMinWidth: 80
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                , curr: pages //设定初始在第 5 页
                , groups: 5 //只显示 1 个连续页码
                , limit: 10
            }
            , request: {
                pageName: 'current' //页码的参数名称，默认：page
                , limitName: 'size'
            }
            , where: myWhere
            , defaultToolbar: false
            , loading: true
            , cols: myCols
            , response: {
                statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                console.log(res, '45656465')
                if (res.code != 0) {

                    return false;
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            }
            , jump: function (obj, first) {
                //首次不执行
                if (!first) {
                    pages = obj.curr
                }
            }
            , error: function (res, msg) {
                console.log(res, msg)
            }
            , done: function (res) {
                layer.close()
            }
        });

        var $ = layui.$, active = {
            reload: function () {
                setMyWhere()
                //执行重载
                table.reload('exampleTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: myWhere
                });
            }
        };

        /**
         * 搜索事件
         */
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        /**
         * 单选
         */
        if ($('#type').val() != '拼团') {
            form.on('radio(demo-radio-filter)', function (data) {
                $('#myRadio').val(data.elem.value)
                setMyWhere()
                table.reload('exampleTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: myWhere
                });
            });
        }

    });

}

/**
 * 详情
 * @param id 数据id
 * @param index 数据集合第几个默认-1，展示全部
 */
function lookInfo(id, index) {
    const toIindex = layer.open({
        type: 2,
        title: '订单详情',
        // maxmin: true,
        shadeClose: false,
        resize: false,
        area: ['800px', '500px'],
        content: `/jzweb/jazGroupActivity/info/${id}/${index}/${$('#type').val()}`,
    });
    layer.full(toIindex);
}
